<template>
    <div class="menu-container">
        <a-menu v-model:openKeys="state.openKeys" v-model:selectedKeys="state.selectedKeys" mode="inline" theme="dark"
            :inline-collapsed="state.collapsed" :items="items" @select="onSelect"></a-menu>
    </div>
</template>
<script setup>
import { reactive, watch, h } from "vue";
import { useRoute, useRouter } from 'vue-router';

import {
    PieChartOutlined,
    LineChartOutlined,
    MailOutlined,
    DesktopOutlined,
    InboxOutlined,
    AppstoreOutlined,
} from "@ant-design/icons-vue";
const state = reactive({
    collapsed: false,
    selectedKeys: ["1"],
    openKeys: ["sub1"],
    preOpenKeys: ["sub1"],
});
const items = reactive([
{
        key: "1",
        icon: () => h(PieChartOutlined),
        label: "实时状态",
        title: "实时状态",
        path: "/"
    },
    {
        key: "2",
        icon: () => h(LineChartOutlined),        //<LineChartOutlined />
        label: "历史记录",
        title: "历史记录",
        path: "/history"
    },
    {
        key: "sub2",
        icon: () => h(AppstoreOutlined),
        label: "系统设置",
        title: "系统设置",
        children: [
            {
                key: "9",
                label: "版本信息",
                title: "版本信息",
                path: "/about"
            },
        ],
    },
]);

const route = useRoute();
const router = useRouter();

const navigateTo = (path) => {
    router.push(path);
};

watch(
    () => state.openKeys,
    (_val, oldVal) => {
        state.preOpenKeys = oldVal;
    }
);
const toggleCollapsed = () => {
    state.collapsed = !state.collapsed;
    state.openKeys = state.collapsed ? [] : state.preOpenKeys;
};
const onSelect = menu => {
    // console.log("onSelect",menu)   
    navigateTo(menu.item.path)
}
</script>

<style lang="less" scoped>
.menu-container{
    width: 12rem;
}
</style>